<template>
  <div class="page-list-con" :style="{height:collapseHei + 'px'}">
    <ul class="page-list-scroll">
      <li v-for="(page, index) in currentPages" :key="page.id" class="page-list">
        <div class="page-con" @click.stop="onPageItem(page)"  @mouseenter="onHover(page)" @mouseleave="onOut(page)">
          <div class="page-number" :class="page.isActive ? 'page-active' : ''"><span>{{index + 1}}</span></div>
          <div class="page-thumbnail" :class="page.isActive ? 'page-active' : ''" :id="'page-' + index" :style="selectedPageStyles(page)">
            <div class="page-thumbnail-style" :style="scaleSitePageStyles(page)">
              <group-component :style="getPageStyles(page)" :item="page"></group-component>
              <div class="thumbnail-mask"></div>
            </div>
          </div>
          <div class="page-btns-con">
            <div v-show="page.attrs.isDisplayBtns" class="page-btns">
              <i class="jy-icon-copy" @click.stop="onCopyPage($event, page.id)"></i>
              <!-- <i class="el-icon-tickets" @click.stop="onSaveTemplate"></i> -->
              <i class="jy-icon-delete" @click.stop="onDeletePage($event, page.id)"></i>
              <el-icon @click.stop="onMoveTop(index)"><top /></el-icon>
            </div>
          </div>
        </div>
        <div class="mask" :style="thumbnailPageHeight(page)"></div>
      </li>
    </ul>
    <div class="page-confirm-con">
      <el-dialog title="提示" :show-close="false" v-model="isDeletePage" width="30%">
        <template #title>
          <span class="el-dialog__title">提示</span>
          <button type="button" class="el-dialog__headerbtn"  @click.stop="onClose(false)">
            <i class="el-dialog__close jy-icon-layer-closed"></i>
          </button>
        </template>
        <div>您确定要删除该页面吗？</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="info" @click.stop="onClose(false)">取消</el-button>
            <el-button type="warning" class="orange-bg-color" @click.stop="onClose(true)">删除</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <div class="page-list-slider" :class="{'page-list-slider-active': bIsSliderOver || bIsSliderGet}"
      @mouseover="handleSliderMOver"
      @mouseout="handleSliderMOut"
      @mousedown="handleSliderMDown">
    </div>
  </div>
</template>

<script>
import GroupComponent from '@/components/group-component.vue'
import { mapActions, mapState, mapGetters } from 'vuex'
import { reactive } from 'vue'
import { PAGE_TYPE_ } from "@/common/const.js"
import { THUMBNAIL_WIDTH } from '@/common/const-dif'
import { bgPositionStyle } from '@/store/utils'
import { getPxOVwByValue } from '@/store/utils'

export default {
  name: "CollapsePage",
  setup () {
    const state =  reactive({
      collapseHei: 0,
      attrs: { isDisplayBtns: false },
      isDeletePage: false,
      bIsSliderGet: false,  // if slider is mousedown
      bIsSliderOver: false,  // if slider is mouseover
    })
    const state_ = {
      deletePageId: 0,
      PAGE_TYPE_: PAGE_TYPE_,
      mouseY: Infinity,  // mouse y position
      defaultCollapseHei: 0,  // collapseHei default value
    }
    _.merge(state, state_)
    return state
  },
  components:{
    GroupComponent,
  },
  props: {
    type: [String, Number]
  },
  created() {
    this.collapseHei = window.innerHeight - 60 - 56;  // index-header + el-collapse-head*2 + right-timelime
    this.defaultCollapseHei = window.innerHeight - 60 - 56;
  },
  computed: {
    ...mapState("components", {
      siteAttrs: state => state.attrs,
      id: state => state.id,
      fileUploadData: state => state.fileUploadData,
    }),
    ...mapGetters("components", {
      isSite: "isSite",
      pages: "getH5Pages",
      pops: "getPopPages"
    }),
    siteStyles() {
      const styles_ = {}
      if(this.siteAttrs.bgUrl) {
        styles_.backgroundImage = 'url(' + this.siteAttrs.bgUrl + ')'
      } else {
        styles_.backgroundColor = this.siteAttrs.backgroundColor
      }
      return styles_
    },
    currentPages() {
      if(this.type == PAGE_TYPE_.page) {
        return this.pages
      } else {
        return this.pops
      }
    },
  },
  mounted() {
    window.addEventListener('mouseup', this.handleSliderMUp, false);
    window.addEventListener('mousemove', this.handleSliderMMove, false);
  },
  methods: {
    ...mapActions("components", {
      addPage: "addPage",
      deletePage: "deletePage",
      copyPage: "copyPage",
      setActivePage: "setActivePage",
      updatePageStyles: "updatePageStyles",
      updatePageAttrsById: "updatePageAttrsById",
    }),
    selectedPageStyles(page){
      return {
        width: this.thumbnailPageWidth(page),
        height: this.thumbnailPageHeight(page),
      }
    },
    getPageStyles(page) {
      const pageStyles_ =  {
        backgroundColor: page.attrs.backgroundColor,
        backgroundImage: 'url(' + page.attrs.bgUrl + ')',
        width: getPxOVwByValue(page.attrs.width),
        height: getPxOVwByValue(page.attrs.height),
      }
      bgPositionStyle(pageStyles_, page.attrs.bgPositionRepeatType)
      return pageStyles_
    },  
    scaleSitePageStyles(page){
      let styles_
      let pageStyles = this.getPageStyles(page)
      if(page.type == PAGE_TYPE_.pop){
        styles_= _.cloneDeep(pageStyles)
      }else{
        styles_= _.cloneDeep(this.siteStyles)
        styles_.height = pageStyles.height
        styles_.width = pageStyles.width
      }
      styles_.transform = 'scale(' + THUMBNAIL_WIDTH/page.attrs.width + ')'
      return styles_
    },
    thumbnailPageHeight(page){
      return Math.round(page.attrs.height*(THUMBNAIL_WIDTH/page.attrs.width)) + 8 + "px";
    },
    thumbnailPageWidth(page){
      return Math.round(page.attrs.width*(THUMBNAIL_WIDTH/page.attrs.width)) + 8 + "px";
    },
    onHover(page) {
      this.attrs.isDisplayBtns = true;
      if(page.attrs.isDisplayBtns != this.attrs.isDisplayBtns){
        this.updatePageAttrsById({ attrs: this.attrs, id: page.id });
      }
    },
    onOut(page) {
      this.attrs.isDisplayBtns = false;
      if(page.attrs.isDisplayBtns != this.attrs.isDisplayBtns){
        this.updatePageAttrsById({ attrs: this.attrs, id: page.id });
      }
    },
    onPageItem(page) {
      this.setActivePage({ id: page.id });

      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },
    onAddPage(e, type) {
      e.stopPropagation();
      e.preventDefault();
      //是页面还是弹出层1 页面 2 弹出层
      this.addPage({ type });
    },
    onDeletePage(e, id) {
      e.stopPropagation();
      e.preventDefault();

      this.deletePageId = id;
      this.isDeletePage = true

      // this.deletePage({ id });
    },
    onClose(isDelete){
      if(isDelete){
        this.deletePage({ id: this.deletePageId });
      }
      this.isDeletePage = false

    },
    onCopyPage(e, id) {
      e.stopPropagation();
      e.preventDefault();
      this.copyPage({ id });
    },
    onMoveTop(pageIndex){
      if(pageIndex > 0){
        this.$store.commit("components/movePageIndex", {type: this.type, pageIndex});
      }
    },
    handleSliderMOver() {
      // handle slider when mouseover
      // console.log(e.currentTarget);
      this.bIsSliderOver = true;
    },
    handleSliderMOut() {
      this.bIsSliderOver = false;
    },
    handleSliderMMove(e) {
      // const that = this;
      // handle slider when mousemove
      if(this.bIsSliderGet) {
        // do mouse compute here
        // console.log(e.y);

        // when mouse is beginning to moving
        if(isNaN(this.mouseY) || this.mouseY === Infinity) this.mouseY = e.y;

        // mouse moving & computing
        const lastMouseY = this.mouseY;
        this.mouseY = e.y;
        const deltaMouseY = this.mouseY - lastMouseY;
        if(deltaMouseY >= 0) {
          // mouse down move
          this.collapseHei += deltaMouseY;
          if(this.collapseHei > this.defaultCollapseHei) this.collapseHei = this.defaultCollapseHei;
        }
        if(deltaMouseY < 0) {
          // mouse up move
          this.collapseHei += deltaMouseY;
          if(this.collapseHei <= 0) this.collapseHei = 0;
        }
      }
    },
    handleSliderMDown() {
      this.bIsSliderGet = true;
    },
    handleSliderMUp() {
      this.bIsSliderGet = false;

      this.resetMouseParams();
    },
    resetMouseParams() {
      this.mouseY = Infinity;
    },
  },
  beforeUnmount() {
    window.removeEventListener('mouseup', this.handleSliderMUp, false);
    window.removeEventListener('mousemove', this.handleSliderMMove, false);
  },
};
</script>

<style lang="scss" scoped>
  .page-list-con{
    border-bottom: solid 1px #EDEFF2;
    border-radius: 5px;
    // box-shadow: 0 10px transparent inset,0 -10px 20px rgba(237, 239, 242, .75) inset, -10px 0 transparent inset, 10px 0 transparent inset;
  }
  .page-list-slider{
    position: absolute;
    bottom: 0;
    height: 2px;
    width: 100%;
    cursor: row-resize;
  }
  .page-list-slider-active{
    background-color: red;
    border-top: solid 1px red;
    border-bottom: solid 1px red;
  }
</style>
